<template>
    <div class="footer_menu">
        <div v-if="access3" class="xyxq menu" @click="changeVillage('杏园小区')">
            <img v-if="store.village == '杏园小区'" class="image" src="../assets/images/footer/xyxq_hover.png">
            <img v-else class="image" src="../assets/images/footer/xyxq.png">
        </div>
        <div v-if="access1" class="yshy menu" @click="changeVillage('宜盛花园')">
            <img v-if="store.village == '宜盛花园'" class="image" src="../assets/images/footer/yshy_hover.png">
            <img v-else class="image" src="../assets/images/footer/yshy.png">
        </div>
        <div v-if="access2" class="hkxq menu" @click="changeVillage('湖口小区')">
            <img v-if="store.village == '湖口小区'" class="image" src="../assets/images/footer/hkxq_hover.png">
            <img v-else class="image" src="../assets/images/footer/hkxq.png">
        </div>

    </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { getUserAccessVillage } from "@/api/car"
const { proxy } = getCurrentInstance();
import { useStore } from '@/stores';

const store = useStore();
const route = useRoute();

const bus = proxy.$bus;

const access1 = ref(true);
const access2 = ref(true);
const access3 = ref(true);

onMounted(() => {
    setTimeout(() => {
        if (!store.village) {
            bus.emit("getMap");
        }
    }, 2000);
    //如果需要根据不同的权限显示菜单，请执行下面的方法
    const access = route.query.access;
    if (access == 1) {
        getAccessVillage();
    }
});


/**
 * 切换小区,需要根据不同的小区加载不同的UE场景
 * @param {*} village 
 */
const changeVillage = (village) => {
    bus.emit("changeVillage", village);
}
function getAccessVillage() {
    const uid = route.query.uid;
    if (uid) {
        getUserAccessVillage(uid).then(res => {
            console.log("=====getUserAccessVillage=====", res);
            if (res) {
                access1.value = res.includes('宜盛花园');
                access2.value = res.includes('湖口小区');
                access3.value = res.includes('杏园小区');
            }
        });
    } else {
        console.log("没有获取到参数uid");
    }
}
</script>
<style scoped lang="scss">
.footer_menu {
    height: 3.24%; // 70/2160
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 1.25%; //27px/2160
    left: 50%;
    transform: translateX(-50%);

    .menu {
        cursor: pointer;

        .image {
            // width: 288px;
            height: 100%;
        }
    }


    .yshy {
        height: 100%;

        &:hover {
            content: url('../assets/images/footer/yshy_hover.png');
            height: 100%;
        }
    }

    .hkxq {
        height: 100%;
        margin-left: -2%;

        &:hover {
            content: url('../assets/images/footer/hkxq_hover.png');
        }
    }

    .xyxq {
        height: 100%;
        margin-left: -2%;

        &:hover {
            content: url('../assets/images/footer/xyxq_hover.png');
        }
    }

    .tools_right {
        margin-left: 20px;
        font-size: 60px;
        color: #fff;

        .btn {
            cursor: pointer;
            text-shadow: 1px 0 #000,
                -1px 0 #000,
                0 1px #000,
                0 -1px #000,
                1px 1px #000,
                -1px -1px #000,
                1px -1px #000,
                -1px 1px #000;
        }
    }
}
</style>